<template>
  <!-- 容器 -->
  <div ref="line" class="charts"></div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    mounted() {
      let charts = echarts.init(this.$refs.line)
      charts.setOption({
        // 隐藏x轴
        xAxis: {
          show: false,
          // 添加折线节点(均分)
          type: 'category',
        },
        // 隐藏y轴
        yAxis: {
          show: false,
        },
        series: [{
          // 图表类型
          type: 'line',
          // 图表数据
          data: ['10', '20', '30', '1', '70'],
          // 拐点隐藏
          itemStyle: {
            opacity: 0
          },
          // 折线颜色
          lineStyle: {
            color: 'purple'
          },
          // 折线填充颜色(渐变)
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'purple' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#fff' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          // 平滑折线
          smooth:true
        }],
        // 画板布局
        grid: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
      })
    }
  }
</script>

<style scoped>
  .charts {
    width: 100%;
    height: 100%;
  }
</style>
